<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>cloud-home</title>
		<meta name="description" content="" />
		<meta name="author" content="hello" />
		<!-- stylesheet import-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/table.css" />
		<style type="text/css">
		  	body{
		  		padding-top: 80px;
		  		padding-bottom:60px;
		  	}
  		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="brand">Cloud Service Center</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a href="#">Home</a></li>
	              <li><a href="about.html">About</a></li>
	              <li><a href="contact.html">Contact</a></li>
	            </ul>
	            <ul class="nav" style="float: right">
	              <li class="active"><a id="user"></a></li>
	              <li><a href="index.html">logout</a></li>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
	    <div class="container">
	    	<div class="row">
	            		<ul class="nav nav-tabs">
						  <li class="active"><a href="#orders" data-toggle="tab">Shipping Orders</a></li>
						  <li><a href="#div-dispatch" data-toggle="tab">Mission Dispatching Center</a></li>
						  <li><a href="#track" data-toggle="tab">Missions Tracking</a></li>
						</ul>
	              		<div class="tab-content">
	              			<div id="orders" class="tab-pane active">
	              				<div class="span13 row-fluid" style="height: 450px;">
	              					<div>
	              						<input id="query_orders" type="button" class="btn btn-primary" value="Query orders"/>
					    				<span class="help-inline" style="color:#999999">Query the orders recently</span>
	              					</div>
					    			<div class="span3">
					    				<table id="orders_table" class="tablesorter"> 
												<thead> 
													<tr> 
														<th>Id</th> 
														<th>Packing List No</th> 
														<th>Interchange Receipt No</th> 
													</tr> 
												  </thead> 
													<tbody> 
													</tbody>
												<!-- 	<tbody tabindex="0"></tbody> -->
										</table>
					    			</div>
					    			<div class="span4">
					    				<table class="table_detail" width="400" height="450" border="1">
										  <tr>
										    <td colspan="5"><label>PACKING LIST</label></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>NO</label><span id="pack_no"></span></td>
										    <td colspan="2"><label>SHIPPER</label><span id="pack_shipper"></span></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>CONTAINER NO</label><span id="pack_cno"></span></td>
										    <td colspan="2"><label>OCEAN VESSEL</label><span id="pack_ov"></span></td>
										  </tr>
										  <tr>
										    <td><label>CARGO NAME</label><span id="pack_cargo"></span></td>
										    <td><label>BOXES</label><span id="pack_boxes"></span></td>
										    <td><label>QUANTITY</label><span id="pack_quantity"></span></td>
										  </tr>
										  <tr>
										    <td><label>UNIT PRICE($)</label><span id="pack_up"></span></td>
										    <td><label>TOTAL PRICE($)</label><span id="pack_tp"></span></td>
										    <td><label>UNIT VOLUME(M3)</label><span id="pack_uv"></span></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>TOTAL VOLUME(M3)</label><span id="pack_tv"></span></td>
										    <td colspan="2"><label>TOTAL WEIGHT(K.G.)</label><span id="pack_tw"></span></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>PLACE OF ORGIN</label><span id="pack_poo"></span></td>
										    <td colspan="2"><label>DATE</label><span id="pack_date"></span></td>
										  </tr>
										</table>
					    			</div>
					    			<div class="span4">
					    				<table class="table_detail" width="400" height="450" border="1">
										  <tr>
										    <td colspan="4"><label>EQUIPMENT INTERCHANGE RECEIPT</label></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>COMPANY</label><span id="eir_company"></span></td>
										    <td colspan="2"><label>CONTAINER USER</label><span id="eir_user"></span></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>PLACE OF DELIVERY</label><span id="eir_pod"></span></td>
										    <td width="105"><label>DELIVERED TO</label><span id="eir_dt"></span></td>
										    <td width="111"><label>PLACE OF RETURN</label><span id="eir_por"></span></td>
										  </tr>
										  <tr>
										    <td width="80"><label>VESSEL</label><span id="eir_vess"></span></td>
										    <td width="109"><label>CONTAINER NO</label><span id="eir_cno"></span></td>
										    <td><label>SIZE/TYPE</label><span id="eir_st"></span></td>
										    <td><label>CNTR.OPTR.</label><span id="eir_optr"></span></td>
										  </tr>
										  <tr>
										    <td><label>SEAL.NO.</label><span id="eir_seal"></span></td>
										    <td colspan="3"><label>TRUCK,WAGON,BARGE NO.</label><span id="eir_truck"></span></td>
										  </tr>
										  <tr>
										    <td colspan="2"><label>PPS OF GATE-OUT/STATUS</label><span id="eir_pout"></span></td>
										    <td colspan="2"><label>PPS OF GATE-INSTATUS</label><span id="eir_pin"></span></td>
										  </tr>
										  <tr>
										    <td colspan="4"><label>TIME-OUT</label><span id="eir_timeout"></span></td>
										  </tr>
										</table>
					    			</div>
					    		</div>
	              			</div>
	              			<div id="div-dispatch" class="tab-pane">
	              				<div class="span6">
	              					<table class="table">
	              							<tr>
					    						<td width="100px" style="text-align:right">NO</td>
					    						<td><input id="moto_no" type="text"></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">DISPATCH TO</td>
					    						<td><input id="moto_name" type="text"></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">START TIME</td>
					    						<td><input id="moto_start" type="text"></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">DUE TIME</td>
					    						<td><input id="moto_due" type="text"></td>
					    					</tr>
					    					<tr>
					    						<td width="100px" style="text-align:right">COMMENT</td>
					    						<td><textarea id="moto_comment" rows="4" cols="20"></textarea></td>
					    					</tr>
					    					<tr>
					    						<td width="100px"></td>
					    						<td><input id="dispatch" type="button" class="btn" value="Dispatch"></td>
					    					</tr>
					    				</table>
	              				</div>
	              			</div>
	              			<div id="track" class="tab-pane">
	              				<div class="span4">
	              					<ul style="list-style:none">
	              						<li>
	              							<input id="no_name" type="text" placeholder="type no or name...">
	              							<input id="trackall" type="button" class="btn btn-primary" value="Track All">
	              							<input id="trackno" type="button" class="btn" value="Track By No"> 
	              							<input id="trackname" type="button" class="btn" value="Track By Name">
	              						</li>
	              					</ul>
	              				</div>
	              				<div class="span6">
					    				<table id="track_table" class="tablesorter"> 
												<thead> 
													<tr> 
														<th>No</th> 
														<th>Driver Name</th>
														<th>Start Time</th>
														<th>Due Time</th>
														<th>End Time</th>
														<th>Comment</th> 
														<th>Status</th> 
													</tr> 
												  </thead> 
													<tbody> 
													</tbody>
										</table>
					    		</div>
	              			</div>
	              		</div>
	            	</div>
	    </div> <!-- /container -->
	    
	    <!-- JavaScript at the bottom for fast page loading -->

		  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		  <script src="js/libs/jquery-1.7.1.min.js"></script>
		<!-- import bootstrap-->
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="js/home.js"></script>
		<script src="js/libs/jquery.dataTables.min.js"></script>
		<script src="test/test.js"></script>
	</body>
</html>
